Creé un formulario con una entrada como tipo de texto y también un botón para ejecutar un código Javascript.
<input required type="text" id="bNum" value="" name="bNum" size="6" maxlength="6" placeholder="Badge Number" onkeyup="this.value = this.value.toUpperCase();"> <button onclick=" verify();return false;">Verify</button> function verify () { var bno = document.getElementById("bNum").value; switch (bno) { case "AJC8": alert("You are a Verified member!") break; case "AJB0": alert("You are a Verified member!") break; default: alert("You are Not a Verified member!") break; } }Si hago clic en el botón, la función lo ejecuta y no muestra que el campo sea obligatorio.
Está mezclando múltiples conceptos y comportamientos, y sus expectativas no coinciden con las especificaciones actuales para estos atributos HTML.
Esto es lo que dice el MDN para el atributo required del elemento<input> :
requerido
requerido es un atributo booleano que, si está presente, indica que el usuario debe especificar un valor para la entrada antes de que se pueda enviar el formulario propietario . El atributo requerido es compatible con entradas de texto, búsqueda, URL, teléfono, correo electrónico, fecha, mes, semana, hora, fecha y hora local, número, contraseña, casilla de verificación, radio y archivo.
Énfasis añadido por mí. Tenga en cuenta que el atributo required solo bloqueará el envío de un formulario. Lo que significa que solo presentaría la acción de enviar un elemento <form> , que no es lo que está haciendo aquí.
required simplemente no bloquea otras interacciones, aunque puede confiar en él para implementar su propia lógica de bloqueo en su código JS y controlar la interacción con sus elementos.
Por ejemplo, podría agregar un oyente onClick en el botón y verificar si su entrada está marcada como "obligatoria" y tiene un valor vacío.